<!--The content below is only a placeholder and can be replaced.-->
<div class="top">
  <app-topbar
    (openEvent)="getProjects($event)"
    (ToCCSLEvent)="ToCCSL($event)"
    (SMTEvent)="setSMT($event)"
    (importEvent)="importFile()"
    [projectName]="projectName"
  >
  </app-topbar>
  <div class="main">
    <app-mainbar
    [SafeNLName]="projectName"
    ></app-mainbar>
    <app-errorbar></app-errorbar>
  </div>
  <!-- <app-text></app-text> -->
  <!-- <router-outlet></router-outlet> -->

  <!---遮挡层-->
  <div id="popLayer"></div>
  <!---新建项目--->
  <div id="projectPopBox" class="popBox">
    <span class="projectTitle">New Project</span>
    <button class="close" (click)="closeBox()">X</button>
    <form
      action=""
      method="post"
      name="elementInputForm"
      class="element-input"
      novalidate
    >
      <label class="nameLabel" for="description">Name:</label>
      <input id="fileName" style="width: 150px;" name="description" type="text" required />
      <br /><br />
      <input
        type="submit"
        style="position: absolute;
        left: 50px;
        /* top: 260px; */
        border-radius: 4px;
        border: none;"
        value="Confirm"
        (click)="confirm()"
      />
      <input
        type="submit"
        style="position: absolute;
        left: 150px;
        /* top: 260px; */
        border-radius: 4px;
        border: none;"
        value="Cancel"
        (click)="closeBox()"
      />
    </form>
  </div>

  <!---项目选择--->
  <div id="OpenProject" class="OpenProject">
    <div class="table">
      <span class="label">OpenProject:</span>
      <button class="close" (click)="close('OpenProject')">X</button>
    </div>
    <div class="showPro">
      <form id="opProject">
        <ul *ngFor="let pro of projects">
          <li
            id="select"
            [class.selected]="projectName"
            (click)="search(pro)"
          >
            {{ pro }}
            <ul *ngIf="projectName === pro">
              <li *ngFor="let version of versions">
                <label
                  ><input
                    type="radio"
                    name="project"
                    id="version"
                    value="{{ version }}"
                  />{{ version }}</label
                >
              </li>
            </ul>
          </li>
        </ul>
      </form>
    </div>
    <div style="position: absolute;bottom:10px;">
      <button class="button" id="OpenProjectOpen" (click)="openSafeNL()">
        Open
      </button>
      <button
        class="button"
        id="OpenProjectClose"
        (click)="close('OpenProject')"
      >
        Cancel
      </button>
    </div>
  </div>

  <!---CCSL依赖选择--->
  <div id="ChooseCCSL">
    <span class="label">Add State Dependence</span>
    <button class="close" (click)="close('ChooseCCSL')">X</button>
    <form
      action=""
      method="post"
      name="elementInputForm"
      class="element-input"
      novalidate
    >
    <ul>
      <li>
        <label>
          <input type="radio" name="state" id="state" value="no"/>
          antonym detection
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="state" id="state" value="exclude"/>
          add exclude
        </label>
      </li>
      <!-- <li>
        <label>
          <input type="radio" name="state" id="state" value="stateDiagram"/>
          add stateDiagram
        </label>
      </li> -->
    </ul>
      <br>
      <input
        type="submit"
        style="position: absolute;
        left: 30px;
        /* top: 260px; */
        border-radius: 4px;
        border: none;"
        value="Confirm"
        (click)="ChooseCCSL()"
      />
      <input
        type="submit"
        style="position: absolute;
        left: 120px;
        /* top: 260px; */
        border-radius: 4px;
        border: none;"
        value="Cancel"
        (click)="close('ChooseCCSL')"
      />
    </form>
  </div>

  <!---SMTCheck--->
  <div id="SMTCheck" class="SMTCheck">
    <span class="projectTitle">SMTCheck</span>
    <button class="close" (click)="close('SMTCheck')">X</button>
    <form
      action=""
      method="post"
      name="elementInputForm"
      class="element-input"
      novalidate
    >
      <label class="nameLabel" for="description">TimeOut:</label>
      <input id="TimeOut" class="textInput" name="description" type="text" required />
      <br>
      <label class="nameLabel" for="description">Bound:</label>
      <input id="Bound" class="textInput" name="description" type="text" required />
      <br>
      <label class="nameLabel" for="description">Period:</label>
      <input id="Period" class="selectInput" name="description" type="checkbox" required />
      <br>
      <label class="nameLabel" for="description">Period Value:</label>
      <input id="PeriodValue" class="textInput" name="description" type="text" required />
      <br>
      <label class="nameLabel" for="description">Deadlock:</label>
      <input id="Deadlock" class="selectInput" name="description" type="checkbox" required />
      <br>
      <input
        type="submit"
        style="position: absolute;
        left: 40px;
        /* top: 260px; */
        border-radius: 4px;
        border: none;"
        value="Confirm"
        (click)="setSMTInfo()"
      />
      <input
        type="submit"
        style="position: absolute;
        left: 140px;
        /* top: 260px; */
        border-radius: 4px;
        border: none;"
        value="Cancel"
        (click)="close('SMTCheck')"
      />
    </form>
  </div>

  <form>
    <input
      type="file"
      ng2FileSelect
      [uploader]="uploader"
      name="stateFile"
      id="stateFile"
      class="openfile"
      (change)="selectedFileOnChanged($event)"
    />
  </form>

  <form>
    <input
      type="file"
      ng2FileSelect
      [uploader]="uploader"
      name="safenlFile"
      id="safenlFile"
      class="openfile"
      (change)="selectedSafenlFileOnChanged($event)"
    />
  </form>

  <div id="addExclude" class="addExclude">
    <span class="projectTitle">AddExclude</span>
    <button class="close" (click)="close('addExclude')">X</button>
    <form
      action=""
      method="post"
      name="elementInputForm"
      class="element-input"
      novalidate
    >
      <label class="nameLabel" for="description">Exclude:</label>
      <br>
      <label class="nameLabel" for="description">State1:</label>
      <input id="state1" style="width: 125px; border: 1px solid #ccc;" name="description" type="text" required />
      <label class="nameLabel" for="description">State2:</label>
      <input id="state2" style="width: 125px; border: 1px solid #ccc;" name="description" type="text" required />
      <br>
      <label for="description"> ExcludeList</label>
      <div class="excludeList">
        <table>
          <tr *ngFor="let tmp of excludeList">
            <td (click)="selectExclude(this,tmp)" [class.selected]="exclude == tmp">
              {{tmp}}
            </td>
          </tr>
        </table>
      </div>
      <input
        type="submit"
        class="button1"
        value="Add"
        (click)="AddExclude()"
      />
      <input
        type="submit"
        class="button2"
        value="Delete"
        (click)="DeleteExclude()"
      />
      <input
        type="submit"
        class="button3"
        value="Confirm"
        (click)="setExclude()"
      />
    </form>
  </div>
